<html>
    <head>
        <title>组件概述</title>
    </head>
    <body>
        <script>
            // 组件概述

                /*
                    一、组件使用入门教程

                                                    ①、 组件是视图层的基本组成单元。
                                                    ②、组件是一个单独且可复用的功能模块的封装。

                                                每个组件，包括如下几个部分： 

                                                    以组件名称为标记的 "开始标签" 和 "结束标签"、"组件内容"、"组件属性"、"组件属性值"。

                                                    ①、组件名称由尖括号包裹，称为标签，它有开始标签和结束标签。
                                                        
                                                            结束标签的<后面用/来表示结束。
                                                            
                                                                结束标签也称为闭合标签。
                                                                
                                                                如下面示例的<component-name>是开始标签，</component-name>是结束标签。

                                                    ②、在开始标签和结束标签之间，称为组件内容。如下面示例的content

                                                    ③、开始标签上可以写属性，属性可以有多个，多个属性之间用空格分割。如下面示例的property1和property2。注意闭合标签上不能写属性。

                                                    ③、每个属性通过=赋值。如下面的示例中，属性property1的值被设为字符串value。

                                                    ★、注意：  所有组件与属性名都是小写，单词之间以连字符-连接。

                                                    eg:

                                                        <component-name property1="value" property2="value">
                                                            content
                                                        </component-name>


                                                下面是一个基本组件的实例，在一个vue页面的根<view>组件下插入一个<button>组件。

                                                给这个组件的内容区写上文字“按钮”，同时给这个组件设置了一个属性“size”，并且“size”属性的值设为了“mini”。

                                                    ★、注意： 
                                                                按照vue单文件组件规范，每个vue文件的根节点必须为 <template>。
                                                                    
                                                                vue2下，这个 <template> 下只能且必须有一个根 <view> 组件。vue3不限制。

                                                    eg:
                                                        <template>
                                                            <view>
                                                                <button size="mini">按钮</button>
                                                            </view>
                                                        </template>


                            <1>、组件的属性类型

                                        组件的属性，有多种类型：

                                                    类型	        描述	            注解

                                                1、Boolean	        布尔值	            组件写上该属性，不管该属性等于什么，其值都为 true，
                                                                                        只有组件上没有写该属性时，属性值才为 false。
                                                                                        如果属性值为变量，变量的值会被转换为 Boolean 类型。
                                                
                                                2、Number	        数字	            1, 2.5
                                                
                                                3、String	        字符串	            "string"
                                                
                                                4、Array	        数组	            [ 1, "string" ]
                                                
                                                5、Object	        对象	            { key: value }
                                                
                                                6、EventHandler	    事件处理函数名	     handlerName 是 methods 中定义的事件处理函数名
                                                
                                                Any	任意属性	

                                        下面的例子演示了组件的属性设置 boolean 值  和数字的例子。

                                        注意 false 作为一个js变量，在组件的属性中使用时，属性前面需增加:冒号前缀，属性值仍使用引号包裹，但引号里不是字符串，而是js。

                                        eg:
                                            <template>
                                                <view>
                                                    <button size="mini" :disabled="false" hover-start-time=20 >按钮</button>
                                                </view>
                                            </template>


                           <2>、公共属性列表

                                                每个组件都有各自定义的属性，但所有 "uni-app"的组件，都有如下属性：


                                                    属性名	   类型	        描述	            注解

                                                    1、id	     String	    组件的唯一标示	    一般用于获取组件上下文对象（如：VideoContext），需要保持整个页面唯一
                                                    
                                                    2、ref	     String	    vue中组件的唯一标示	用来给子组件注册引用信息，详见 Vue 文档
                                                    
                                                    3、class	 String	    组件的样式类	    在对应的 css 中定义的样式类
                                                
                                                    4、style	 String	    组件的内联样式	    可以动态设置的内联样式
                                                    
                                                    5、hidden	 Boolean	组件是否隐藏	    所有组件默认是显示的
                                                    
                                                    6、data-*	 Any	    自定义属性	        组件上触发的事件时，会发送给事件处理函数
                                                    
                                                    7、@*	   EventHandler	组件的事件	        详见各组件详细文档，事件绑定参考 事件处理器


                                                除了上述公共属性，还有一类特殊属性以 "v-" 开头，称之为 vue 指令，如 v-if、v-else、v-for、v-model、v-slot 等

                                                详见： vue指令  https://uniapp.dcloud.net.cn/tutorial/vue-api#%e6%a8%a1%e6%9d%bf%e6%8c%87%e4%bb%a4


                           <3>、在组件中使用script的 data 变量

                                        组件中可以使用script的data中定义的变量，但组件的属性中使用和内容区使用的用法不一样。

                                           ①、在text内容区使用时，使用两个花括号来包裹，如下面的buttonText

                                           ②、在属性值中使用时，属性名的前面要加冒号前缀

                                        下面的button组件示例，等价于上一个的示例。只不过静态内容改成动态js。

                                        eg:
                                                <template>
                                                    <view>
                                                        <button size="mini" :disabled="buttondisble" hover-start-time=20 >{{buttonText}}</button>
                                                    </view>
                                                </template>
                                                <script>
                                                    export default {
                                                        data() {
                                                            return {
                                                                "buttonText":"按钮",
                                                                "buttondisble":false
                                                            }
                                                        }
                                                    }
                                                <//script> 


                           <4>、组件的事件

                                        每个组件都有“事件”。事件就是在指定的条件下触发某个js方法。

                                        比如button组件，有点击事件，也就是当手机用户点击这个button组件时，会触发这个事件。

                                        事件也是组件的属性，只不过这类属性以@为前缀。

                                        事件的属性值，指向一个在script的methods里定义过的js方法，还可以给方法传参数。

                                        下面是组件事件的示例：

                                            ①、click是button组件的点击事件，在用户点击这个button时触发

                                            ②、click指向了methods中定义的goto方法，并且传递了一个参数'/pages/about/about'

                                        eg:

                                            <template>
                                                <view>
                                                    <button size="mini" @click="goto('/pages/about/about')">按钮</button>
                                                </view>
                                            </template>
                                            <script>
                                                export default {
                                                    methods: {
                                                        goto(url) {
                                                            console.log("按钮被点击了，且传入的参数是：" + url)
                                                        }
                                                    }
                                                }
                                            <//script>
                                             
                */


                /*
                    二、基础组件


                        <1>、概述

                                            uni-app的组件，分为 "基础组件" 和 "扩展组件"。

                                            基础组件在uni-app框架中已经内置，无需将内置组件的文件导入项目，也无需注册内置组件，随时可以直接使用，比如 <view>组件。

                                            除了基础组件，其他的都称为 "扩展组件"。

                                            "扩展组件"需要将组件导入项目中才可以使用。

                                            uni-app为开发者提供了一系列基础组件，类似HTML里的基础便签元素。

                                            但 uni-app 的组件与 HTML 不同，二十与小程序相同，可更好的满足手机端的使用习惯。

                                            虽然不推荐使用HTML标签，但实际上如果开发者写了div等标签，在编译到非H5平台时也会被编译器转换为view标签，类似的还有span转text、a转navigator等，

                                            包括css里的元素选择器也会转。但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。

                                            开发者可以通过组合这些基础组件进行快速开发。在需要复用的情况下可封装成扩展组件。

                                            uni-app基础组件规范，与小程序规范相近。

                                            如果了解小程序开发的话，uni-app的基础组件会感觉很舒心。
                                            
                                            但需要注意组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"

                                            eg:

                                                <picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="bindDateChange">
                                                    <view class="picker">
                                                    当前选择: {{date}}
                                                    </view>
                                                </picker>

                        <2>、基础组件列表

                                       基础组件分为以下十几大类：

                                            1、视图容器 (View Container)

                                                        组件名	            说明

                                                    ①、view	        视图容器，类似于HTML中的div

                                                    ②、scroll-view	    可滚动视图容器
                                                    
                                                    ③、swiper	        滑块视图容器，比如用于轮播banner

                                                    ④、match-media	    屏幕动态适配组件，比如窄屏上不显示某些内容

                                                    ⑤、movable-area	可拖动区域

                                                    ⑥、movable-view	可移动的视图容器，在页面中可以拖拽滑动或双指缩放。movable-view必须在movable-area组件中

                                                    ⑦、cover-view	    可覆盖在原生组件的上的文本组件

                                                    ⑧、cover-image	    可覆盖在原生组件的上的图片组件


                                            2、基础内容 (Basic Content)

                                                        组件名	    说明

                                                    ①、icon	    图标

                                                    ②、text	    文字

                                                    ③、rich-text	富文本显示组件
                                                    
                                                    ④、progress	进度条


                                            3、表单组件 (Form)

                                                      标签名	         说明

                                                    ①、button	        按钮

                                                    ②、checkbox	        多项选择器

                                                    ③、editor	        富文本输入框

                                                    ④、form	            表单

                                                    ⑤、input	        输入框

                                                    ⑥、label	        标签

                                                    ⑦、picker	        弹出式列表选择器

                                                    ⑧、picker-view	    窗体内嵌式列表选择器

                                                    ⑨、radio	        单项选择器

                                                    ⑩、slider	        滑动选择器

                                                    ⑪、switch	        开关选择器

                                                    ⑫、textarea	        多行文本输入框


                                            4、路由与页面跳转  (Navigation)

                                                        组件名	    说明
                                                    
                                                    ①、navigator	页面链接。类似于HTML中的a标签


                                            5、媒体组件 (Media)

                                                           组件名	       说明

                                                        ①、audio	       音频

                                                        ②、camera	       相机

                                                        ③、image	       图片

                                                        ④、video	       视频

                                                        ⑤、live-player	   直播播放

                                                        ⑥、live-pusher	   实时音视频录制，也称直播推流


                                            6、地图  （Map）

                                                        组件名	    说明

                                                        ①、map	    地图

                                            7、画布 (Canvas)

                                                         组件名	    说明

                                                      ②、canvas 	画布

                                            8、webview  (Web-view)

                                                         组件名	    说明

                                                      ①、web-view	web浏览器组件

                                            9、广告  

                                                         组件名	       说明

                                                       ①、ad	    广告组件

                                                       ②、ad-draw	沉浸视频流广告组件  

                                            10、页面属性配置

                                                            组件名	          说明
                                                            
                                                        ①、custom-tab-bar	底部tabbar自定义组件

                                                        ②、navigation-bar	页面顶部导航

                                                        ③、page-meta	    页面属性配置节点

                                            11、uniCloud

                                                            组件名	           说明

                                                        ①、unicloud-db组件	uniCloud数据库访问和操作组件

                                            12、各平台专有组件

                                                      在小程序平台和 nvue 平台，还有一些专有组件，比如 open-data,详见左侧导航
                */

                /*
                    三、扩展组件的意义：

                            虽然所有的业务需求都可以通过基础组件满足，但仅有基础组件是低效的，实际开发中会有很多封装的组件。

                            比如我们需要一个五角星点击评分的组件，在DCloud的插件市场里可以获取到：https://ext.dcloud.net.cn/plugin?id=33

                            把这个uni-rate组件导入到你的uni-app项目下，在需要的vue页面里引用它，就可以在指定的地方显示出这个五角星组件。



                            eg:

                                <!-- 在index.vue页面引用 uni-rate 组件-
                                <template>
                                    <view>
                                        <uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 --
                                    </view>
                                </template>

                            
                            ★、封装扩展组件的优势：

                                    ①、可以讲组件进行任意次数的复用

                                    ②、合理的划分组件，有助于提高应用性能

                                    ③、代码更加方便组织和管理，并且扩展性也强，便于多人协同开发。

                                    ④、组件化开发能大幅提高应用开发效率、测试性、复用性等
                */

                /*
                    四、组件的类别

                            uni-app支持的组件分为 "vue组件" 和 "小程序自定义组件"。

                            如果你还不了解这两种组件，可以参阅各自的文档：

                                    ①、vue组件： https://uniapp.dcloud.net.cn/tutorial/vue-components?id=%e6%a6%82%e5%bf%b5

                                    ②、小程序自定义组件： 其规范不是vue规范，而是小程序规范，文档 https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81

                            日常开发来讲，推荐使用vue 组件。  uni-app 支持小程序组件主要为了兼容更多生态资源。

                            如果扩展组件符合uni-app的easycom组件规范，则可以免注册，直接使用。比如uni-ui扩展组件就符合easycom组件规范。

                            如果组件不符合easycom规范，则需要在代码里手动import和注册组件，然后才能使用。

                            除了easycom规范外，扩展组件还有很多概念，比如 "uni_module"、"datacom"、"原生组件"、"uniCloud组件"。
                */

                /*
                    五、easycom 组件规范

                            传统 vue 组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

                            只要组件安装在项目的components目录下或uni_modules目录下，
                            
                            并符合components/组件名称/组件名称.(vue|uvue)目录结构（注意：当同时存在vue和uvue时，
                            
                            uni-app 项目优先使用 vue 文件，而uni-app x 项目优先使用 uvue 文件，详情）。就可以不用引用、注册，直接在页面中使用。

                            比如前述举例的uni-rate组件，它导入到uni-app项目后，存放在了目录/components/uni-rate/uni-rate.vue

                            同时它的组件名称也叫uni-rate，所以这样的组件，不用在script里注册和引用。 如下：

                                    <template>
                                            <view>
                                                <uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 --
                                            </view>
                                    </template>
                                    <、script>
                                        // 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
                                        export default {
                                            data() {
                                                return {

                                                }
                                            }
                                        }
                                    </、script>

                            不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

                            组件库批量安装，随意使用，自动按需打包。

                            以官方的uni-ui为例，在HBuilderX新建项目界面选择uni-ui项目模板，只需在页面中敲u，拉出大量组件代码块，直接选择，即可使用。大幅提升开发效率，降低使用门槛。

                            在DCloud插件市场下载符合 "components/组件名称/组件名称.vue" 目录结构的组件，均可直接使用。
                            
                            easycom是自动开启的，不需要手动开启。

                            如果你的组件名称或路径不符合easycom的默认规范，可以在pages.json的easycom节点进行个性化设置，自定义匹配组件的策略

                            https://uniapp.dcloud.net.cn/collocation/pages#easycom

                           ★、如果不使用easycom，手动引用和注册vue组件，则需要分3步写如下代码：

                                    ①、import 引入组件

                                    ②、components 里注册组件

                                    ③、template 中使用组件

                                       eg:
                                                <template>
                                                    <view>
                                                        <uni-rate text="1"></uni-rate><!-- 3.使用组件 --
                                                    </view>
                                                </template>
                                                </、script>
                                                    import uniRate from '@/components/uni-rate/uni-rate.vue';//1.导入组件
                                                    export default {
                                                        components:{uniRate }//2.注册组件
                                                    }
                                                <//script>

                */

                /*
                     六、uni_modules 组件规范

                              uni_modules其实不止服务于组件，它可以服务于 组件、js库、页面、项目等所有DCloud插件市场所支持的种类。

                              符合 uni_module规范的组件都在项目的 uni_modules 目录下，以插件id为目录存放。 （项目模板不放在 uni_modules目录下）

                              在HBuilderX中点右键可方便的更新插件，插件作者也可以方便的上传插件。

                              uni_module 还支持云端一体的插件。

                        ★、uni_module有详细的专项文档，请另行查阅 uni_module规范
                                                
                                        https://uniapp.dcloud.net.cn/plugin/uni_modules.html        
                */

                /*
                     七、uniCloud 组件

                                uniCloud 是 DCloud 提供的、配套uni-app的云开发服务。

                                uni-app 的基础组件中，有一个特殊基础组件是 <unicloud-db> 组件。

                                它可以在前端直接获取和操作 uniCloud 的云端数据库。

                                相关文档详见：unicloud-db组件：
                                    
                                            https://doc.dcloud.net.cn/uniCloud/unicloud-db

                            ★、除了内置的云端数据库组件，在 uni-ui 扩展库里还有 uniCloud 的文件选择和上传组件。

                                 参考：  uni-file-picker :  https://ext.dcloud.net.cn/plugin?id=4079
                */

                /*
                      八、原生组件和原生插件

                            1、基础组件中的原生组件

                                    uni-app的基础组件里，有一批原生组件，如video、map...

                                    这些组件如果用于vue页面，也就是webview渲染时，会造成层级高于普通前端组件的情况。

                                    它们的层级需要使用cover-view等特殊组件才能覆盖，同时在使用中有些需要注意的事情。

                                    在app-nvue里没有这些问题。

                                    相关文档详见：uni-app内置原生组件说明 https://uniapp.dcloud.net.cn/component/native-component

                            2、uni-app 的 App端原生插件

                                    uni-app的App端支持原生插件，这类插件使用ios或Android原生语言编写，封装成插件，供其他开发者来使用。

                                    原生插件分为原生组件 component 和 原生模块 module

                                    其实原生组件component 只能在App-nvue环境中使用。

                                    相关文档详见： https://nativesupport.dcloud.net.cn/NativePlugin/README
                */

                /*
                       九、datacom 组件

                                 datacom组件是一种数据驱动的、可云端一体的组件。
                                 
                                 传统组件只涉及前端概念，而datacom拉通了uniCloud云端数据，是uni-app+uniCloud协同开发的必备提效工具。
                */

                /*
                        十、如何封装组件

                                  封装组件涉及的知识点较多，相关文档详见：vue组件详解  

                                        https://uniapp.dcloud.io/vue-components
                */
        </script>
    </body>
</html>